<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<style>
</style>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="brandCategory-form">
                <div class="select-list">
                    <ul>

                        <li>
                            品牌：<select name="fbrand" id="fbrand">
                            <option value="">所有</option>
                            <option th:each="brand : ${brands}" th:text="${brand}" th:value="${brand}"></option>
                        </select>
                        </li>
                        <li>
                            类型：<input type="text" id="fcategory" name="fcategory"/>
                        </select>
                        </li>
                        <li>
                            ean：<input type="text" id="fproductean" name="fproductean"/>
                            </select>
                        </li>
                        <li>
                            商品名称：<input type="text" id="fproductname" name="fproductname"/>
                            </select>
                        </li>
                        <li class="select-time">
                            <label>抓取时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]" />
                        </li>
                        <li>
                            <!--<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="doSearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success btn-rounded btn-sm" onclick="switchTo()"><i class="glyphicon glyphicon-sort"></i>&nbsp;切换类型</a>
                        </li>
                    </ul>
                </div>
            </form>

        </div>


        <div class="col-sm-12 select-table table-striped" style="min-height:85%;background-color: #1086141a" id="echarts_table">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
<script th:src="@{/ruoyi/js/toChartsJson.js}"></script>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
    var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "firststage/product";
    var myChart;
    var returnData;//后台返回的数据
    var pageForm;//页面形态(图表：'chart',报表：'table')
    var queryParams_;//搜索参数

    $(function () {
        $.ajax({
            url:prefix+"/list",
            type:'post',
            data:{
                fdate:today(),
                params:{
                    "beginTime":today(),
                    "endTime":today()
                },
            },
            dataType:'json',
            success:function (data) {
                createCharts(data.rows);
            },error:function () {
                console.log('error!');
            },beforeSend:function () {
                /*loadIndex = layer.msg('正在加载数据...', {
                    icon: 16
                    ,shade: 0.01
                    ,time: 0
                });*/
                //设置抓取时间为当前日期前一天
                $("#startTime").val(today());
                $("#endTime").val(today());

                $.modal.loading("数据加载中，请稍后...");
            },complete: function (data) {
                // layer.close(loadIndex);
                $.modal.closeLoading();
            }
        })
    })


    function createCharts(returnJson) {
        var chartJson = productToChartJson(returnJson);
        console.log(chartJson);
        myChart = echarts.init(document.getElementById('echarts_table'));
        var option = {
            title: {
                text: 'ean商品分析表',//图表名称 2012-12资产分析
                textStyle : {
                    fontSize : 18//标题字体
                },
                subtextStyle :	{
                    fontSize  : 15,
                    color : 'gray'
                },
                x: 'center', // 'center' | 'left' | {number},
                y: 'top'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:function (params) {//修改鼠标悬浮样式
                    var returnData = chartJson.titleJson[params[0].dataIndex];//品牌类型
                    returnData+="<br>爬取时间:"+chartJson.dateTimeJson[params[0].dataIndex].substring(0,19);//爬取时间
                    for (var i = 0;i<params.length;i++){
                        returnData+="<br>"+params[i].marker+params[i].seriesName+":"+params[i].value;
                    }
                    return returnData;
                }
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: '97%',
                top: 'center',
                feature: {
                    mark: {show: true},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            dataZoom:[
                {
                    show: true,
                    startValue: 0,
                    endValue:7
                }
            ],
            legend: {
                data:['均价','最高价','最低价','星星点评数(sum)','评论数(sum)','跟卖数量'],
                y:'30',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : chartJson.eanJson,
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'均价',
                    type:'bar',
                    data:chartJson.averagepriceJson//[320, 332, 301, 334, 390, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                    /*markLine : {
                        lineStyle: {
                            normal: {
                                type: 'dashed'
                            },
                            color:{
                                colorStop:[{
                                    offset:0,color:'blue'// 0% 处的颜色
                                },{
                                    offset:1,color:'blue'// 0% 处的颜色
                                }]
                            },
                        },
                        data : [
                            [{type : 'min'}, {type : 'max'}]
                        ]
                    }*/
                },{
                    name:'最高价',
                    type:'bar',
                    data:chartJson.maxpriceJson//[320, 332, 301, 334, 390, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                },
                {
                    name:'最低价',
                    type:'bar',
                    data:chartJson.minpriceJson//[320, 332, 301, 334, 390, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                },
                {
                    name:'星星点评数(sum)',
                    type:'bar',
                    data:chartJson.staramountJson//[120, 132, 101, 134, 90, 230]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                },
                {
                    name:'评论数(sum)',
                    type:'bar',
                    stack:'aa',
                    data:chartJson.commentamountJson//[220, 182, 191, 234, 290, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                },
                {
                    name:'跟卖数量',
                    type:'bar',
                    stack:'aa',
                    data:chartJson.ffollowsellquantityJson//[220, 182, 191, 234, 290, 330]
                    ,label: {
                        normal: {
                            show: true,
                            position:'insideBottom'
                        }
                    },
                }
            ]
        };
        pageForm = 'chart';
        myChart.setOption(option);
    }

    function createTable() {
        pageForm = 'table';
        var options = {
            url:prefix+"/list",
            striped:true,
            queryParams:queryParams,
            modalName: "商品",
            search: false,
            showRefresh:false,
            columns: [
                {
                  field:"fimghref",
                  title:"图片",
                  formatter:function (value, row, index) {
                      return "<img style='width: 50px;height: 70px' src='"+value+"'>";
                  }  
                },
                {
                    field:"fproductean",
                    title:"ean",
                    sortable:true,
                    formatter:function (value, row, index) {/*https://uae.souq.com/ae-en/beats-powerbeats3-in-ear-wireless-headphones-black-12049066/i/*/
                        return "<a href='"+row.fproducthref+"' target=\"_blank\">"+row.fproductean+"</a>"
                    }
                },
                {
                    field: 'fbrand',
                    title: '品牌',
                    sortable:true,
                    // sortable: true
                },
                {
                    field: 'fproductprice',
                    title: '均价',
                    sortable: true
                },
                {
                    field: 'fproductpricemax',
                    title: '最高价',
                    sortable: true
                },
                {
                    field: 'fproductpricemin',
                    title: '最低价',
                    sortable: true
                },
                {
                    field: 'fcategory',
                    title: '类型',
                    sortable:true,
                    // sortable: true
                },
                {
                    field:'ffollowsellquantity',
                    title:'跟卖数',
                    sortable:true,
                },
                {
                    field: 'fstar',
                    title: '评价',
                    sortable: true
                },
                {
                    field: 'fstaramount',
                    title: '星星评价数',
                    sortable: true
                },
                {
                    field: 'fcommentsamount',
                    title: '评论数',
                    sortable: true
                },
                {
                    field:'fproductname',
                    title:'商品名称',
                    sortable:true,
                },
                {
                    field:'fdatetime',
                    title:'抓取时间',
                    sortable:true,
                    formatter:function (value,row,index) {
                        return value.substring(0,19);
                    }
                }
                ,],
            onLoadSuccess: function (item, $element) {
                returnData = $('#bootstrap-table').bootstrapTable('getData');//表格所有数据数据
            },
        };
        $.table.init(options);
    }

    //搜素
    function doSearch() {
        //抓取时间为空不能搜索
        /*if(chooseDateNotNull()!=true){
            $.modal.alertWarning(chooseDateNotNull());
            return false;
        }*/

        var fbrand = $("#fbrand").val();//品牌
        var fcategory = $("#fcategory").val();//类型
        var fproductean = $("#fproductean").val();//ean
        var fproductname = $("#fproductname").val();//商品名称
        var fdate = $("#startTime").val();//日期
        queryParams_ = {
            fbrand:fbrand,
            fcategory:fcategory,
            fproductean:fproductean,
            fproductname:fproductname,
            fdate:fdate,
            params:{"beginTime":$("#startTime").val(),"endTime":$("#endTime").val()},
        }
        if(pageForm=='table'){
            //销毁原表格,否则不会重新从后台再次查询数据
            // $("#bootstrap-table").bootstrapTable('destroy');
            $.table.search();
        }else {
            myChart.dispose();
            $.ajax({
                url:prefix+"/list",
                type:'post',
                dataType:'json',
                data:queryParams_,
                success:function (data) {
                    returnData = data.rows;
                    createCharts(returnData);
                },error:function () {
                    console.log('error!');
                }
            })
        }

        // $("#bootstrap-table").bootstrapTable('refresh',{url:prefix+'/list',query:queryParams_});
    }


    //切换图表报表
    function switchTo() {
        if (pageForm == 'chart') {//判断是否为报表，是则切换图表，否则切换报表
            myChart.dispose();//释放图表，摧毁对象
            // $("#echarts_table").empty();
            $("#echarts_table").css("user-select","auto");//修改从图表切换过来不能复制问题
            $("#echarts_table").append("<table id=\"bootstrap-table\" data-mobile-responsive=\"true\" ></table>");
            createTable();
        } else {
            createCharts(returnData);
        }
    }

    //查询参数
    function queryParams(params) {
        return {
            fbrand:         $("#fbrand").val(),//品牌
            fcategory:      $("#fcategory").val(),//类型
            fproductean:    $("#fproductean").val(),//ean
            fproductname:   $("#fproductname").val(),//商品名称
            fdate:           $("#startTime").val(),//日期
            params:          {"beginTime":$("#startTime").val(),"endTime":$("#endTime").val()},
            pageSize:       params.limit,
            pageNum:        params.offset / params.limit + 1,
            searchValue:    params.search,
            orderByColumn:  params.sort,
            isAsc:          params.order
        };
    }



</script>
</body>
</html>